<!-- eslint-disable vue/no-mutating-props -->
<template>
  <template v-if="orderType == 1">
    <card class="add-info-card" title="作废备注" toggle v-if="orderDetails.deleteFlag == 1">
      <div class="section-item">
        <div class="section-item-content">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="作废人">{{ orderDetails.invalidStaffName }}</a-descriptions-item>
            <a-descriptions-item label="作废时间">{{ orderDetails.invalidTime }}</a-descriptions-item>
            <a-descriptions-item :span="3" label="备注">{{ orderDetails.invalidRemark }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </card>
    <card class="add-info-card" title="客户信息" toggle>
      <div class="section-item">
        <div class="section-item-content">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="客户类型">{{ orderDetails.memberTypeName }}</a-descriptions-item>
            <a-descriptions-item label="客户公司名称" v-if="orderDetails.memberType == 1">{{
              orderDetails.clientName
            }}</a-descriptions-item>
            <a-descriptions-item label="承租人">{{ orderDetails.memberName }}</a-descriptions-item>
            <a-descriptions-item label="联系电话">{{ orderDetails.memberPhone }}</a-descriptions-item>
            <a-descriptions-item label="证件类型">{{ memberInfoDto?.cardTypeName }}</a-descriptions-item>
            <a-descriptions-item label="证件号">{{ memberInfoDto?.cardNumber }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </card>
    <card class="add-info-card" title="租赁信息" toggle>
      <template #title>
        <span style="margin-right: 10px">租赁信息</span>
        <a-tag v-if="orderDetails.orderStatus == 10" color="orange">{{ orderDetails.orderStatusName }}</a-tag>
        <a-tag v-if="orderDetails.orderStatus == 100" color="orange">{{ orderDetails.orderStatusName }}</a-tag>
        <a-tag v-if="orderDetails.orderStatus == 200" color="blue">{{ orderDetails.orderStatusName }}</a-tag>
        <a-tag v-if="orderDetails.orderStatus == 300" color="green">{{ orderDetails.orderStatusName }}</a-tag>
        <a-tag v-if="orderDetails.orderStatus == 1000" color="green">{{ orderDetails.orderStatusName }}</a-tag>
        <a-tag v-if="orderDetails.orderStatus == -100" color="gray">{{ orderDetails.orderStatusName }}</a-tag>
      </template>
      <div class="section-item">
        <div class="section-item-content">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="自有订单号">{{ orderDetails.orderCode }}</a-descriptions-item>
            <a-descriptions-item label="订单来源">{{ orderDetails.orderSourceName }}</a-descriptions-item>
            <a-descriptions-item label="订单渠道">{{ orderDetails.channelTypeName }}</a-descriptions-item>
            <!-- 渠道订单展示渠道单号 -->
            <a-descriptions-item label="渠道单号" v-if="orderDetails.orderSource == 2">{{
              orderDetails.channelOrderCode
            }}</a-descriptions-item>
            <a-descriptions-item label="订单获取方式">{{ orderDetails.orderAcquisitionTypeName }}</a-descriptions-item>
            <a-descriptions-item label="预计租赁周期"
              >{{ orderDetails.startTime || '-' }}至{{ orderDetails.endTime || '-' }}</a-descriptions-item
            >
            <a-descriptions-item label="租期">{{ orderDetails.rentDays }}</a-descriptions-item>
            <a-descriptions-item label="车型">{{ orderDetails.originalSiteModelName }}</a-descriptions-item>
            <a-descriptions-item label="取车门店">{{ orderDetails.siteName }}</a-descriptions-item>
            <a-descriptions-item label="上门送车地址">{{ orderDetails.address }}</a-descriptions-item>
            <a-descriptions-item label="还车门店">{{ orderDetails.returnSiteName }}</a-descriptions-item>
            <a-descriptions-item label="上门取车地址">{{ orderDetails.returnAddress }}</a-descriptions-item>
            <a-descriptions-item label="车辆来源">{{ orderDetails.carSourceName }}</a-descriptions-item>
            <a-descriptions-item label="车牌号">
              {{ orderDetails.carLicenseNo }}
              <a-tag color="red" v-if="orderDetails.orderCarLabel">{{ orderDetails.orderCarLabel }}</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="交车车型">{{ orderDetails.carModelName }}</a-descriptions-item>
            <a-descriptions-item label="实际租赁周期">
              {{ orderDetails.actualStartTime || '-' }}至{{ orderDetails.actualEndTime || '-' }}
            </a-descriptions-item>
            <!-- 取消状态 -->
            <a-descriptions-item label="取消时间" v-if="orderDetails.orderStatus == -100">
              {{ orderDetails.cancelTime || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="超时时长">{{ orderDetails.overTimeStr }}</a-descriptions-item>
            <a-descriptions-item label="订单备注">{{ orderDetails.remark }}</a-descriptions-item>
          </a-descriptions>
          <!-- 渠道的一些信息 -->
          <a-descriptions :size="'medium'" :align="{ label: 'right' }" v-if="orderDetails.orderSource == 2">
            <a-descriptions-item label="渠道车牌号">{{ orderDetails.channelCarLicenseNo }}</a-descriptions-item>
            <a-descriptions-item label="渠道车型">{{ orderDetails.channelModelName }}</a-descriptions-item>
            <a-descriptions-item label="渠道取车门店">{{ orderDetails.channelSiteName }}</a-descriptions-item>
            <a-descriptions-item label="渠道还车门店">{{ orderDetails.channelReturnSiteName }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </card>
    <card class="add-info-card" title="交车信息" toggle v-if="orderDetails.giveCarInfoDto">
      <div class="section-item">
        <div class="section-item-content">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="交车时间">{{ orderDetails.giveCarInfoDto.useStartTime }}</a-descriptions-item>
            <a-descriptions-item label="交车人">{{ orderDetails.giveCarInfoDto.giveStaffName }}</a-descriptions-item>
            <a-descriptions-item label="交车里程">{{ unitVal(orderDetails.giveCarInfoDto.startCarMileage, '公里') }}</a-descriptions-item>
            <a-descriptions-item :span="3" label="交车油（电）量">{{
              orderDetails.giveCarInfoDto.startCarOil ? orderDetails.giveCarInfoDto.startCarOil : '-'
            }}</a-descriptions-item>
            <a-descriptions-item :span="3" label="交车照片">
              <upload-img-ota
                v-if="orderDetails.giveCarInfoDto.giveOtaFileUrls.length"
                :fileList="orderDetails.giveCarInfoDto.giveOtaFileUrls"
                disabled
              />
              <upload-img
                v-if="
                  orderDetails.giveCarInfoDto.giveFileIds.length ||
                  (orderDetails.giveCarInfoDto.giveFileIds.length == 0 && orderDetails.giveCarInfoDto.giveOtaFileUrls.length == 0)
                "
                v-model="orderDetails.giveCarInfoDto.giveFileIds"
                disabled
                margin
              />
            </a-descriptions-item>
            <a-descriptions-item :span="3" label="交车视频">
              <upload-video-ota
                style="margin-bottom: 8px"
                v-if="orderDetails.giveCarInfoDto.giveVideoOtaFileUrls.length"
                :fileList="orderDetails.giveCarInfoDto.giveVideoOtaFileUrls"
                single
                disabled
              />
              <upload-video
                v-if="
                  orderDetails.giveCarInfoDto.giveVideoFileIds.length ||
                  (orderDetails.giveCarInfoDto.giveVideoFileIds.length == 0 && orderDetails.giveCarInfoDto.giveVideoOtaFileUrls.length == 0)
                "
                v-model="orderDetails.giveCarInfoDto.giveVideoFileIds"
                :max="1"
                disabled
              />
            </a-descriptions-item>
            <a-descriptions-item :span="3" label="交车备注">{{ orderDetails.giveCarInfoDto.useStartRemark }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </card>
    <card class="add-info-card" title="还车信息" toggle :showDivider="false" v-if="orderDetails.returnCarInfoDto">
      <div class="section-item">
        <div class="section-item-content">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="还车时间">{{ orderDetails.returnCarInfoDto.useEndTime }}</a-descriptions-item>
            <a-descriptions-item label="还车人">{{ orderDetails.returnCarInfoDto.returnStaffName }}</a-descriptions-item>
            <a-descriptions-item label="还车里程">{{ unitVal(orderDetails.returnCarInfoDto.endCarMileage, '公里') }}</a-descriptions-item>
            <a-descriptions-item :span="3" label="还车油（电）量">{{
              orderDetails.returnCarInfoDto.endCarOil != null ? orderDetails.returnCarInfoDto.endCarOil : '-'
            }}</a-descriptions-item>
            <a-descriptions-item :span="3" label="还车照片">
              <upload-img-ota
                v-if="orderDetails.returnCarInfoDto.returnOtaFileUrls.length"
                :fileList="orderDetails.returnCarInfoDto.returnOtaFileUrls"
                disabled
              />
              <upload-img
                v-if="
                  orderDetails.returnCarInfoDto.returnFileIds.length ||
                  (orderDetails.returnCarInfoDto.returnFileIds.length == 0 && orderDetails.returnCarInfoDto.returnOtaFileUrls.length == 0)
                "
                v-model="orderDetails.returnCarInfoDto.returnFileIds"
                disabled
                margin
              />
            </a-descriptions-item>
            <a-descriptions-item :span="3" label="还车视频">
              <upload-video-ota
                style="margin-bottom: 8px"
                v-if="orderDetails.returnCarInfoDto.returnVideoOtaFileUrls.length"
                :fileList="orderDetails.returnCarInfoDto.returnVideoOtaFileUrls"
                single
                disabled
              />
              <upload-video
                v-if="
                  orderDetails.returnCarInfoDto.returnVideoFileIds.length ||
                  (orderDetails.returnCarInfoDto.returnVideoFileIds.length == 0 &&
                    orderDetails.returnCarInfoDto.returnVideoOtaFileUrls.length == 0)
                "
                v-model="orderDetails.returnCarInfoDto.returnVideoFileIds"
                :max="1"
                disabled
              />
            </a-descriptions-item>
            <a-descriptions-item :span="3" label="还车备注">{{ orderDetails.returnCarInfoDto.useEndRemark }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </card>
  </template>
  <template v-if="orderType == 2">
    <card class="add-info-card" title="作废备注" toggle v-if="orderDetails.deleteFlag == 1">
      <div class="section-item">
        <div class="section-item-content">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="作废人">{{ orderDetails.invalidStaffName }}</a-descriptions-item>
            <a-descriptions-item label="作废时间">{{ orderDetails.invalidTime }}</a-descriptions-item>
            <a-descriptions-item :span="3" label="备注">{{ orderDetails.invalidRemark }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </card>
    <card class="add-info-card" title="客户信息" toggle>
      <div class="section-item">
        <div class="section-item-content">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="客户类型">{{ orderDetails.memberTypeName }}</a-descriptions-item>
            <a-descriptions-item label="客户公司名称" v-if="orderDetails.memberType == 1">{{
              orderDetails.clientName
            }}</a-descriptions-item>
            <a-descriptions-item label="承租人">
              <div class="member-name">
                <span>{{ orderDetails.memberName }}</span>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="联系电话">{{ orderDetails.memberPhone }}</a-descriptions-item>
            <a-descriptions-item label="证件类型">{{ memberInfoDto?.cardTypeName }}</a-descriptions-item>
            <a-descriptions-item label="证件号">{{ memberInfoDto?.cardNumber }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </card>
    <card class="add-info-card" title="租赁信息" toggle>
      <template #title>
        <span style="margin-right: 10px">租赁信息</span>
        <tag type="primary">{{ orderDetails.orderStatusName }}</tag>
      </template>
      <div class="section-item">
        <div class="section-item-content">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="订单状态">{{ orderDetails.statusName }}</a-descriptions-item>
            <a-descriptions-item label="长租订单号">{{ orderDetails.orderNo }}</a-descriptions-item>
            <a-descriptions-item label="订单来源">{{ orderDetails.orderSourceName }}</a-descriptions-item>
            <a-descriptions-item label="订单获取方式">{{ orderDetails.orderAcquisitionTypeName }}</a-descriptions-item>
            <a-descriptions-item label="预计租赁周期" v-if="orderDetails.expectedUseCarTime && orderDetails.expectedReturnCarTime"
              >{{ orderDetails.expectedUseCarTime }}-{{ orderDetails.expectedReturnCarTime }}</a-descriptions-item
            >
            <a-descriptions-item label="租期">{{ orderDetails.leaseNumberStr }}</a-descriptions-item>
            <a-descriptions-item label="车型">{{ orderDetails.originalSiteModelName }}</a-descriptions-item>
            <a-descriptions-item label="取车门店">{{ orderDetails.siteName }}</a-descriptions-item>
            <a-descriptions-item label="上门送车地址">{{ orderDetails.address }}</a-descriptions-item>
            <a-descriptions-item label="还车门店">{{ orderDetails.returnSiteName }}</a-descriptions-item>
            <a-descriptions-item label="上门取车地址">{{ orderDetails.returnAddress }}</a-descriptions-item>
            <a-descriptions-item label="车辆来源">{{ orderDetails.carSourceName }}</a-descriptions-item>
            <a-descriptions-item label="车牌号">
              {{ orderDetails.licenseNo }}
              <a-tag color="red" v-if="orderDetails.orderCarLabel">{{ orderDetails.orderCarLabel }}</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="交车车型">{{ orderDetails.modelName }}</a-descriptions-item>
            <!-- 取消状态 -->
            <a-descriptions-item label="取消时间" v-if="orderDetails.status == -100">
              {{ orderDetails.cancelTime || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="实际租赁周期">
              {{ orderDetails.realUseCarTime }}-{{ orderDetails.realReturnCarTime }}
            </a-descriptions-item>
            <a-descriptions-item label="超时时长">{{ orderDetails.timeoutDuration }}</a-descriptions-item>
            <a-descriptions-item label="订单备注">{{ orderDetails.remark }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </card>
    <card class="add-info-card" title="交车信息" toggle v-if="orderDetails.giveCarInfoDto">
      <div class="section-item">
        <div class="section-item-content">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="交车时间">{{ orderDetails.giveCarInfoDto.giveCarTime }}</a-descriptions-item>
            <a-descriptions-item label="交车人">{{ orderDetails.giveCarInfoDto.giveStaffName }}</a-descriptions-item>
            <a-descriptions-item label="交车里程">{{ unitVal(orderDetails.giveCarInfoDto.giveCarMileage, '公里') }}</a-descriptions-item>
            <a-descriptions-item :span="3" label="交车油（电）量">{{
              orderDetails.giveCarInfoDto.giveFuelAmount || '-'
            }}</a-descriptions-item>
            <a-descriptions-item :span="3" label="交车照片">
              <upload-img v-model="orderDetails.giveCarInfoDto.giveFileIds" disabled margin />
            </a-descriptions-item>
            <a-descriptions-item :span="3" label="交车视频">
              <upload-video v-model="orderDetails.giveCarInfoDto.giveVideoFileIds" :max="1" disabled />
            </a-descriptions-item>
            <a-descriptions-item :span="3" label="交车备注">{{ orderDetails.giveCarInfoDto.remark }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </card>
    <card class="add-info-card" title="还车信息" toggle :showDivider="false" v-if="orderDetails.returnCarInfoDto">
      <div class="section-item">
        <div class="section-item-content">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="还车时间">{{ orderDetails.returnCarInfoDto.returnCarTime }}</a-descriptions-item>
            <a-descriptions-item label="还车人">{{ orderDetails.returnCarInfoDto.returnStaffName }}</a-descriptions-item>
            <a-descriptions-item label="还车里程">{{
              unitVal(orderDetails.returnCarInfoDto.returnCarMileage, '公里')
            }}</a-descriptions-item>
            <a-descriptions-item :span="3" label="还车油（电）量">{{
              orderDetails.returnCarInfoDto.returnFuelNum || '-'
            }}</a-descriptions-item>
            <a-descriptions-item :span="3" label="还车照片">
              <upload-img v-model="orderDetails.returnCarInfoDto.returnFileIds" disabled margin />
            </a-descriptions-item>
            <a-descriptions-item :span="3" label="还车视频">
              <upload-video v-model="orderDetails.returnCarInfoDto.returnVideoFileIds" :max="1" disabled />
            </a-descriptions-item>
            <a-descriptions-item :span="3" label="还车备注">{{ orderDetails.returnCarInfoDto.useEndRemark }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </card>
  </template>
</template>

<script setup name="orderDetailsPage">
  import { unitVal } from '@/utils'
  import { getShortOrdrDetails } from '@/api/order/sOrder'
  import { getLongOrderDetails } from '@/api/order/czsOrder'
  import { onMounted, ref } from 'vue'
  const orderDetails = ref({})
  const memberInfoDto = ref({})
  const props = defineProps({
    orderId: Number,
    orderType: Number,
  })
  const getDetails = () => {
    if (props.orderType == 1) {
      getShortOrdrDetails({ id: props.orderId }).then((res) => {
        orderDetails.value = res.result.orderInfo
        memberInfoDto.value = res.result.memberInfoDto
      })
    } else {
      getLongOrderDetails({ id: props.orderId }).then((res) => {
        orderDetails.value = res.result.orderInfo
        memberInfoDto.value = res.result.memberInfoDto
      })
    }
  }
  onMounted(() => {
    getDetails()
  })
</script>

<style lang="less" scoped></style>
